<template>
    <div class="wrapper appLog">
        <p>
            <i class="iconfont icon-users"></i>日志信息
        </p>
        <div style="padding-top:10px;padding-left:5px;text-align: left;">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="应用实例">
                    <el-select v-model="appLogParm.podName" placeholder="请选择应用实例">
                        <el-option v-for="item in podNames" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item>
                                    <el-date-picker :editable="false" v-model="appLogParm.times" type="datetimerange" :picker-options="pickerOptions2" placeholder="选择时间范围" align="right">
                                    </el-date-picker>
                                </el-form-item> -->
                <!-- <el-form-item>
                                    <el-input v-model="appLogParm.queryKey" placeholder="请输入关键字">
                                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                    </el-input>
                                </el-form-item> -->
                <el-form-item>
                    <el-select @change="showRecodesChange" v-model="appLogParm.selectRecode">
                        <el-option v-for="item in appLogParm.showRecodes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-search" @click="clickQuery" type="primary">查询</el-button>
                    <el-button icon="el-icon-download" @click="logExport" type="primary">导出</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>
            <el-input type="textarea" :rows="15" v-model="appLogResult.logs" :readonly="true"></el-input>
            <!-- <el-pagination @current-change="currentChange" style="text-align: right" layout="prev, pager, next" :page-count="appLogResult.totalPage">
                                            </el-pagination> -->
            <!-- <el-form :inline="true" class="demo-form-inline" style="text-align: right">
                                <el-form-item :label="appLogResult.dateRange">
                                </el-form-item>
                                <el-form-item>
                                    <el-select @change="showRecodesChange" v-model="appLogParm.selectRecode">
                                        <el-option v-for="item in appLogParm.showRecodes" :key="item.value" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item :label="appLogResult.totalRecodes">
                                </el-form-item>
                            </el-form> -->
        </div>
    </div>
</template>
<script>
// 消息通知组件
import { Notification } from 'element-ui';
export default {
    data() {
        return {
            appLogParm: {
                podName: '',
                times: [],
                queryKey: '',
                currentPage: 1,
                selectRecode: '100',
                showRecodes: [{ label: '最近100行记录', value: '100' },
                { label: '最近200行记录', value: '200' },
                { label: '最近500行记录', value: '500' },
                { label: '最近1000行记录', value: '1000' },
                { label: '最近2000行记录', value: '2000' }]
            },
            appLogResult: {
                logs: '暂无日志记录',
                totalPage: 0,
                totalNum: 0,
                dateRange: '',
                totalRecodes: '共0条日志记录'
            },
            //时间控件
            pickerOptions2: {
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date(new Date().setHours(0, 0, 0, 0))
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const end = new Date(new Date(new Date().setDate(new Date().getDate() - 1)).setHours(23, 59, 59, 999));
                        const start = new Date(new Date(new Date().setDate(new Date().getDate() - 1)).setHours(0, 0, 0, 0));
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            }
        }
    },
    props: [
        //数组
        "podNames",
        "namespaceName",
    ],
    methods: {
        showRecodesChange: function(value) {
            this.clickQuery();
        },
        clickQuery() {
            this.appLogParm.currentPage = 1;
            let tmp = {
                logs: '暂无日志记录',
                totalPage: 0,
                totalNum: 0,
                dateRange: '',
                totalRecodes: '共0条日志记录'
            };
            this.appLogResult = tmp;
            this.innerQuery();
        },
        innerQuery() {
            if (this.namespaceName == undefined || this.namespaceName == '') {
                Notification.warning({
                    title: '温馨提示',
                    message: '未设置命名空间'
                });
                return;
            }

            if (this.appLogParm.podName == undefined || this.appLogParm.podName == '') {
                Notification.warning({
                    title: '温馨提示',
                    message: '请选择应用实例'
                });
                return;
            }

            let url = this.projectConfig.URL_API_APPLOG_QUERY2;
            let p = {
                namespaceName: this.namespaceName,
                podName: this.appLogParm.podName,
                queryKey: this.appLogParm.queryKey,
                currentPage: this.appLogParm.currentPage,
                selectRecode: this.appLogParm.selectRecode
            };
            let ts = '';
            let te = '';
            if (this.appLogParm.times != undefined && this.appLogParm.times != '') {
                let t = this.appLogParm.times + "";
                ts = t.split(',')[0];
                // ts = ts.replace('GMT+0800 (中国标准时间)', 'GMT+08:00');
                // te = t.split(',')[1];
                // te = te.replace('GMT+0800 (中国标准时间)', 'GMT+08:00');
                ts = this.dateHandle(ts);
                te = t.split(',')[1];
                te = this.dateHandle(te);
            }
            url += "?namespaceName=" + p.namespaceName
                + "&podName=" + p.podName
                + "&timeStart=" + ts
                + "&timeEnd=" + te
                + "&queryKey=" + p.queryKey
                + "&showRecodes=" + p.selectRecode;
            this.appLogResult.logs = "加载日志中...";
            this.httpClient.httpClientget(url).then((response) => {
                let d = response.data;
                this.appLogResult = d;
            })

        },
        logExport() {
            if (this.namespaceName == undefined || this.namespaceName == '') {
                Notification.warning({
                    title: '温馨提示',
                    message: '未设置命名空间'
                });
                return;
            }

            if (this.appLogParm.podName == undefined || this.appLogParm.podName == '') {
                Notification.warning({
                    title: '温馨提示',
                    message: '请选择应用实例'
                });
                return;
            }

            let url = this.projectConfig.URL_API_APPLOG_EXPORT;
            let p = {
                namespaceName: this.namespaceName,
                podName: this.appLogParm.podName,
                queryKey: this.appLogParm.queryKey,
                currentPage: this.appLogParm.currentPage,
                selectRecode: this.appLogParm.selectRecode
            };
            let ts = '';
            let te = '';
            if (this.appLogParm.times != undefined && this.appLogParm.times != '') {
                let t = this.appLogParm.times + "";
                ts = t.split(',')[0];
                // ts = ts.replace('GMT+0800 (中国标准时间)', 'GMT+08:00');
                // te = t.split(',')[1];
                // te = te.replace('GMT+0800 (中国标准时间)', 'GMT+08:00');
                ts = this.dateHandle(ts);
                te = t.split(',')[1];
                te = this.dateHandle(te);
            }
            url += "?namespaceName=" + p.namespaceName
                + "&podName=" + p.podName
                + "&timeStart=" + ts
                + "&timeEnd=" + te
                + "&queryKey=" + p.queryKey
                + "&showRecodes=" + p.selectRecode;
            this.httpClient.httpClientDownloadLogExt(url, p.podName).then(res => {
            })

        },
        dateHandle: function(date) {
            //eg Thu May 12 2016 08:00:00 GMT+0800 (中国标准时间)
            var d = new Date(date);
            //eg yyyy-MM-dd hh:mm:ss
            var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
            return youWant;
        },
        currentChange: function(currentPage) {
            this.appLogParm.currentPage = currentPage;
            this.innerQuery();
        }
    },
    mounted: function() {
        let _this = this;
    },
    //计算属性
    computed: {

    },
    //属性变化监听
    watch: {
        podNames: {
            handler: function(val, oldval) {
                this.appLogParm.podName = '';
                this.appLogParm.queryKey = '';
                this.appLogParm.currentPage = 1;
                this.appLogParm.selectRecode = '100';

                this.appLogResult.logs = '暂无日志记录';
                this.appLogResult.totalPage = 0;
                this.appLogResult.totalNum = 0;
                this.appLogResult.dateRange = '';
                this.appLogResult.totalRecodes = '共0条日志记录';
                if(this.podNames!=undefined&&this.podNames.length>0){
                    this.appLogParm.podName=this.podNames[0];
                }
            }
        }
    }
}
</script>
<style>
.appLog .bg-black {
    background-color: black;
}

.appLog .el-textarea__inner {
    background: #000;
    color: #fff;
}
</style>